<template>
  <div>
    <h3>Abc组件 - 按钮和输入框的互斥效果</h3>
    <p>{{age}}</p>
    <input type="text" v-if="flag" @blur="flag=false" ref="ipt">
    <button v-else @click="showIpt">按钮</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            flag:true,
            age:20
        }
    },
    methods: {
        showIpt() {
            this.flag = true
            // this.age++
            //vue 的数据驱动视图，是说数据变化了，页面就会自动更新，但是也不是立即更新
            //vue 官方说法是，会在下次循环时更新页面
            //如果希望马上获取页面元素，可以将代码写到 this.$nextTick 中
            this.$nextTick(() => {
                this.$refs.ipt.focus()
            })
            // this.$refs.ipt.focus()  //让输入框获取焦点
        }
    }
}
</script>

<style>

</style>